<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: absolute;
        left: 300px;
      }
    </style>
  </head>

  <body>
    <div class="box1"></div>
    <div class="box2"></div>

    <script>
      // 实现一个方块的拖拽 ，抽象成类；

      class Drag {
        constructor(ele) {
          this.ele = ele;
          this.downFn();
          this.upFn();
        }
        // 鼠标按下的逻辑
        downFn() {
          // this是实例化对象；
          var that = this;
          this.ele.onmousedown = function (e) {
            // this 是  外部的 this.ele
            let x = e.clientX - this.offsetLeft;
            let y = e.clientY - this.offsetTop;
            that.moveFn(x, y);
          };
        }
        moveFn(x, y) {
          this.ele.onmousemove = function (e) {
            // this 执行 this.ele;
            let xx = e.clientX;
            let yy = e.clientY;
            this.style.left = xx - x + "px";
            this.style.top = yy - y + "px";
          };
        }
        // 鼠标抬起的时候清空  move方法
        upFn() {
          this.ele.onmouseup = function () {
            this.onmousemove = "";
          };
        }
      }

      let box1 = document.querySelector(".box1");
      new Drag(box1);

      // 第二个方块 继承第一个方块 扩展 限定范围的功能；

      // 迭代
      // 装饰器模式
      class SonDrag extends Drag {
        moveFn(x, y) {
          this.ele.onmousemove = function (e) {
            // this 执行 this.ele;
            let xx = e.clientX;
            let yy = e.clientY;
            let disx = xx - x;
            let disy = yy - y;

            // 限定范围
            if (disx <= 0) {
              disx = 0;
            }

            if (disx >= window.innerWidth - this.offsetWidth) {
              disx = window.innerWidth - this.offsetWidth;
            }

            if (disy <= 0) {
              disy = 0;
            }

            if (disy >= window.innerHeight - this.offsetHeight) {
              disy = window.innerHeight - this.offsetHeight;
            }
            this.style.left = disx + "px";
            this.style.top = disy + "px";
          };
        }
      }

      let box2 = document.querySelector(".box2");
      new SonDrag(box2);

      // onclick  onmouseover
      // onclick = null;
      // addEventListener("click",fn);
      // removeEventListener("click",fn);

      // document.onclick = function(){
      //     console.log(111);
      // }

      // document.onclick = function(){
      //     console.log(2222);
      // }

      // document.addEventListener("click",function(){
      //     console.log(111);
      // })
      // document.addEventListener("click",function(){
      //     console.log(222);
      // })
    </script>
  </body>
</html>
